<template>
    <V3Echarts :width="props.width" :height="props.height" :options="option" container="container3" />
</template>

<script lang="ts" setup>
import { AXIS_LABEL, LEGEND, LINE_TOOLTIP, XAXIS_NAME } from '../chartConfig'
import { ref, watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Object,
        default: () => {
            return {
                yUnit: '辆',
                xUnit: '',
                xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
                value: [
                    {
                        name: '入园',
                        data: [47.9, 55.2, 61.2, 68.3, 79.5, 82, 88.44]
                    },
                    {
                        name: '出园',
                        data: [27.9, 25.2, 31.2, 38.3, 39.5, 22, 38.44]
                    }
                ]
            }
        }
    },
    color: {
        type: Array,
        default: () => {
            return ['#56b0f8', '#e5e3a8', '#f5f7ff', '#d57f57']
        }
    },
    width: {
        type: Number,
        default: 1000
    },
    height: {
        type: Number,
        default: 350
    },
    splitNumber: {
        type: Number,
        default: 5
    },
    symbol: {
        type: String,
        default: 'none'
    },
    dataZoom: {
        type: Boolean,
        default: false
    },
    smooth: {
        type: Boolean,
        default: true
    }
})
let option: any = ref({})

const initChart = () => {
    const series: any = []
    props.chartData.value.forEach((item: any) => {
        series.push({
            name: item.name,
            type: 'line',
            data: item.data,
            smooth: props.smooth,
            symbol: props.symbol,
            symbolSize: 5,
            lineStyle: {
                width: 2
            },
            areaStyle: {
                shadowBlur: 1,
                opacity: 0.1
            },
            yAxisIndex: item.yAxisIndex || 0
        })
    })
    option.value = {
        tooltip: LINE_TOOLTIP,
        color: props.color,
        legend: {
            top: '0%',
            right: '5%',
            icon: 'rectangle',
            itemWidth: 15,
            itemHeight: 5,
            textStyle: LEGEND,
            data: props.chartData.data
        },
        grid: {
            top: '10%',
            left: '0%',
            right: '10%',
            bottom: props.dataZoom ? '10%' : '0%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.chartData.xAxis,
            axisLabel: AXIS_LABEL,
            axisLine: {
                show: true
            },
            boundaryGap: false,
            splitLine: {
                show: false //隐藏或显示
            },
            name: props.chartData.xUnit,
            nameGap: 5,
            nameLocation: 'end',
            splitNumber: props.splitNumber,
            nameTextStyle: XAXIS_NAME
        },
        dataZoom: [
            {
                show: props.dataZoom,
                type: 'inside',
                start: 0,
                end: 100
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: props.chartData.yUnit,
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                },
                axisLabel: AXIS_LABEL,
                nameGap: 10,
                nameLocation: 'end',
                splitNumber: props.splitNumber,
                nameTextStyle: {
                    fontSize: 14,
                    color: 'rgba(255,255,255,0.5)',
                    align: 'left',
                    verticalAlign: 'bottom',
                    padding: [0, 0, 0, 0]
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(204,204,204,0.5)',
                        width: 1
                    }
                }
            }
        ],
        series: series
    }
}

watch(
    () => props,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>
